<template>
  <!--背景图  -->
  <img :src="musicList.al.picUrl" alt="" class="bgimg">
  <!-- 弹出层顶部区域 -->
  <div class="detailTop">
    <div class="detailTopLeft">
      <van-icon name="revoke" size="27" color="#fff" @click="detailShow" />
      <div class="leftMarquee">
        <Vue3Marquee>
          {{musicList.name}}
        </Vue3Marquee>
        <span v-for="item in musicList.ar" :key="item.name">{{item.name}}</span>
        <van-icon name="arrow" size="11" color="#999" />
      </div>
    </div>
    <div class="detailTopRight">
      <van-icon name="share-o" size="27" color="#fff" />
    </div>
  </div>
  <!-- 弹出层中间区域 -->
  <div class="detailContent" v-show="!isLyricShow" @click="isLyricShow = !isLyricShow">
    <img src="@/assets/needle-ab.png" alt="" :class="{img_needle:isbtnShow,img_needle_active:!isbtnShow}">
    <img src="@/assets/cd.png" alt="" class="img_cd">
    <img :src="musicList.al.picUrl" alt="" class="img_ar" :class="{img_ar_active:!isbtnShow,img_ar_pauesd:isbtnShow}">
  </div>
  <!-- 弹出层中间歌词区域 -->
  <div class="musicLyric" ref="musicLyricRef" v-show="isLyricShow" @click="isLyricShow = !isLyricShow">
    <p v-for="item in lyric" :key="item" :class="{active:currentTime * 1000 >= item.time && currentTime * 1000 < item.pre}">{{item.lrc}}</p>
  </div>
  <!-- 弹出层底部区域 -->
  <div class="detailFooter">
    <div class="footerTop">
      <van-icon name="like-o" color="#fff" size="25" />
      <van-icon name="down" color="#fff" size="25" />
      <van-icon name="music-o" color="#fff" size="25" />
      <van-icon name="more" color="#fff" size="25" />
      <van-icon name="exchange" color="#fff" size="25" />
    </div>
    <div class="footerContent">
      <input type="range" class="range" min="0" :max="duration" v-model="currentTime" step="0.05" />
    </div>
    <div class="footer">
      <van-icon name="replay" color="#fff" size="28" />
      <van-icon name="arrow-left" color="#fff" size="28" @click="goPlay(-1)" />
      <!-- 暂停按钮 -->
      <van-icon name="play-circle-o" color="#fff" size="47" v-if="isbtnShow" @click="play" />
      <!-- 播放按钮 -->
      <van-icon name="pause-circle-o" color="#fff" size="47" v-else @click="play" />
      <van-icon name="arrow" color="#fff" size="28" @click="goPlay(+1)" />
      <van-icon name="bars" color="#fff" size="28" />
    </div>
  </div>
</template>

<script>
// 引用跑马灯组件
import { Vue3Marquee } from 'vue3-marquee'
import { mapMutations, mapState } from 'vuex'
import 'vue3-marquee/dist/style.css'
export default {
  name: 'Detail',
  props: ['musicList', 'play'],
  data() {
    return {
      // 控制是否显示歌词
      isLyricShow: false
    }
  },
  components: {
    Vue3Marquee
  },
  computed: {
    ...mapState(['isbtnShow', 'lyricList', 'currentTime', 'playListIndex', 'playList', 'duration']),
    // 处理请求获得歌词数据
    lyric() {
      let arr
      // 如果是有歌词的将歌词切割换成数组
      if (this.lyricList.lyric) {
        arr = this.lyricList.lyric.split(/[(\r\n)\r\n]+/).map(item => {
          let min = item.slice(1, 3)
          let sec = item.slice(4, 6)
          let mill = item.slice(7, 10)
          let lrc = item.slice(11, item.length)
          // 将分、秒都转为毫秒进行判断当前播放到那里
          let time = parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill)
          // 判断当mill是否存在非数字符号
          if (isNaN(Number(mill))) {
            mill = item.slice(7, 9)
            lrc = item.slice(10, item.length)
            time = parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill)
          }
          // 返回对应歌词、时间给新数组arr
          return { min, sec, mill, lrc, time }
        })

        // 获取下一句歌词的时间
        arr.forEach((item, i) => {
          // 如果已经到了最后一句歌词则设置时间为0
          if (i === arr.length - 1 || isNaN(arr[i + 1].time)) {
            item.pre = 10000
          } else {
            item.pre = arr[i + 1].time
          }
        })

        return arr
      }
    }
  },
  methods: {
    // 监听关闭弹出层事件
    detailShow() {
      // 点击返回时关闭弹出层，并且显示磁盘
      this.isLyricShow = false
      this.updateDetailShow()
    },

    // 监听切换上一首下一首歌曲事件
    goPlay(num) {
      let index = this.playListIndex + num
      // 先判断当前播放列表是否只有默认的一首歌 如果是则点击切换上一首或下一首都没效果
      if (this.playList.length == 1) {
        index = 0
        console.log('切换其他歌单列表才可以切换歌曲')
      }
      if (index < 0) {
        // 当切换到第一首时，点上一首会切换到列表的最后一首，反之亦然
        index = this.playListIndex.length - 1
      } else if (index == this.playListIndex.length) {
        index = 0
      }
      this.updatePlayListIndex(index)
    },

    ...mapMutations(['updateDetailShow', 'updatePlayListIndex'])
  },
  watch: {
    // 当歌曲播放时间在变化时，获取对应当前的播放到的歌词到顶部的距离，超过对应值时，则这个歌词大盒子往上走
    currentTime(newValue) {
      // 获取当前播放的歌词元素属性
      let p = document.querySelector('p.active')
      if (p) {
        // [p]加中括号可以获得p元素的其他属性
        if (p.offsetTop > 300) {
          this.$refs.musicLyricRef.scrollTop = p.offsetTop - 300
        }
      }

      // 判断当前播放列表是否只有一首歌时，如果是则播放完毕时再循环播放当前歌曲,如果不是则播放列表的下一首直到列表结尾时再重新回到第一首
      if (newValue == this.duration) {
        if (this.playListIndex === this.playList.length - 1) {
          this.updatePlayListIndex(0)
          this.play()
        } else {
          this.updatePlayListIndex(this.playListIndex + 1)
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.bgimg {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  filter: blur(50px);
}
.detailTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 1rem;
  padding: 0.2rem;
  .detailTopLeft {
    width: 3.3rem;
    height: 100%;
    display: flex;
    align-items: center;
    .leftMarquee {
      height: 100%;
      margin-left: 0.4rem;
      font-size: 0.34rem;
      span {
        margin-right: 0.1rem;
        font-size: 0.28rem;
        color: #999;
      }
    }
  }
}
.detailContent {
  width: 100%;
  height: 9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  .img_needle {
    width: 2rem;
    height: 3rem;
    position: absolute;
    left: 46%;
    transform-origin: 0 0;
    transform: rotate(-13deg);
    transition: all 2s;
  }
  .img_needle_active {
    width: 2rem;
    height: 3rem;
    position: absolute;
    left: 46%;
    transform-origin: 0 0;
    transform: rotate(0deg);
    transition: all 2s;
  }
  .img_cd {
    width: 5rem;
    height: 5rem;
    position: absolute;
    bottom: 2.3rem;
    z-index: -1;
  }
  .img_ar {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    position: absolute;
    bottom: 3.18rem;
    animation: rotate_ar 15s linear infinite;
  }
  .img_ar_active {
    animation-play-state: running;
  }
  .img_ar_pauesd {
    animation-play-state: paused;
  }
  @keyframes rotate_ar {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}
.musicLyric {
  width: 100%;
  height: 8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: scroll;
  margin-top: 0.2rem;
  p {
    color: rgb(190, 181, 181);
    margin-bottom: 0.3rem;
  }
  .active {
    color: #fff;
    font-size: 0.5rem;
  }
}
.detailFooter {
  width: 100%;
  height: 3rem;
  position: absolute;
  bottom: 0.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .footerTop {
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .range {
    width: 100%;
    height: 0.06rem;
  }
  .footer {
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}
</style>